<template>
  <div class="project-manage-container">
    <div class="project-manage-wrap">
      <!-- 搜索框区域 -->
      <div class="search-wrap">
        <div class="search-input-box">
          <form action="/">
            <van-search
              v-model="searchOptions.searchKey"
              show-action
              shape="round"
              placeholder="搜索项目名称/合同编号/工程编号"
              @search="searchOptions.handleSearch"
              @clear="searchOptions.handleClear"
            >
              <template #action>
                <div
                  class="filter-box"
                  @click="searchOptions.handleFilter"
                >
                  <i class="iconfont iconshaixuan"></i>
                  <span>筛选</span>
                </div>
              </template>
            </van-search>
          </form>
        </div>
        <!-- 选中的公司 -->
        <div
          class="custom-box"
          v-if="filterCustomer.id"
        >
          <span class="custom-item">
            <span>{{ filterCustomer.customer }}</span>
            <van-icon
              name="cross"
              @click="deleteCustomer"
            />
          </span>
        </div>
        <ul class="tab-switch-box">
          <li
            v-for="(item, index) in tabList"
            :key="index"
            :class="{ 'li-select': currentTabIndex === index }"
            @click="clickTabItem(index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>

      <!-- 项目列表区域 -->
      <ul
        class="project-list-wrap"
        v-if="projectList.length"
      >
        <li
          v-for="(item, index) in projectList"
          :key="index"
          class="project-item-box"
          @click="jumpView(item.id)"
        >
          <!-- 左侧 -->
          <div class="item-left-box">
            <div class="icon-box">
              <img
                src="../../../assets/images/project_icon.png"
                alt=""
              />
            </div>
            <div
              class="status-box"
              v-if="item.project_status === '试运行'"
            >{{ item.project_status }}</div>
            <div
              class="status-box"
              :class="{ delivery: item.project_status === '已交付' }"
              v-if="item.project_status === '已交付'"
            >
              {{ item.project_status }}
            </div>
            <div
              class="status-box"
              :class="{ acceptance: item.project_status === '已验收' }"
              v-if="item.project_status === '已验收'"
            >
              {{ item.project_status }}
            </div>
            <div
              class="status-box"
              :class="{ bartender: item.project_status === '已过保' }"
              v-if="item.project_status === '已过保'"
            >
              {{ item.project_status }}
            </div>
            <div
              class="status-box"
              :class="{ unknown: item.project_status === '未知' }"
              v-if="item.project_status === '未知'"
            >
              {{ item.project_status }}
            </div>
          </div>
          <!-- 线 -->
          <div class="line-box"></div>
          <!-- 右侧 -->
          <div class="item-right-box">
            <div class="project-name">{{ item.project_name }}</div>
            <div class="middle-box">
              <div class="middle-item">
                <span class="top-key">合同编号</span>
                <span class="bottom-value">{{ item.contract }}</span>
              </div>
              <div class="middle-item">
                <span class="top-key">产线数</span>
                <span class="bottom-value line-val">{{ item.product_line_count }}</span>
              </div>
              <div class="middle-item">
                <span class="top-key">质保时间</span>
                <span class="bottom-value">{{ item.warranty_time2 }}</span>
              </div>
            </div>
            <div class="company-name">
              <img
                src="../../../assets/images/project_company_icon.png"
                alt=""
              >
              <span>{{ item.customer_name }}</span>
            </div>
          </div>
        </li>
      </ul>

      <!-- 无数据 -->
      <div
        class="no-data-box"
        v-if="noDataState"
      >暂无数据</div>
    </div>

    <!-- 筛选 -->
    <FilterCustomer v-if="showFilterCustomer" />
  </div>
</template>

<script>
import { Search } from 'vant';
import { getProjectList } from '@/api/projectManage';
import FilterCustomer from './components/FilterCustomer.vue';

export default {
  name: 'ProjectManage',
  components: {
    [Search.name]: Search,
    FilterCustomer
  },
  data() {
    return {
      projectList: [], // 项目列表数据

      // 搜索相关配置
      searchOptions: {
        searchKey: '',
        handleSearch: this.getProjectListEvent,
        handleClear: this.getProjectListEvent,
        handleFilter: this.handleFilter
      },
      // tab栏
      tabList: [
        { id: 1, title: '全部' },
        { id: 2, title: '试运行' },
        { id: 3, title: '已交付' },
        { id: 4, title: '已验收' },
        { id: 5, title: '已过保' },
        { id: 6, title: '未知' }
      ],
      currentTabIndex: 0, // tab当前索引
      showFilterCustomer: false, // 控制筛选界面的显示与隐藏

      filterCustomer: {},
      noDataState: false
    };
  },
  created() {
    if (this.$route.query.from) {
      this.filterCustomer = this.$route.query.customerInfo;
    }
    this.getProjectListEvent();
  },
  methods: {
    // 获取项目列表
    getProjectListEvent() {
      const params = {
        search: this.searchOptions.searchKey, // 可输入合同编号/工程编号查找
        test_run: this.currentTabIndex === 1 ? 1 : '', // 试运行
        already: this.currentTabIndex === 2 ? 1 : '', // 已交付
        acceptance: this.currentTabIndex === 3 ? 1 : '', // 已验收
        has_confirmed: this.currentTabIndex === 4 ? 1 : '', // 已过保
        none: this.currentTabIndex === 5 ? 1 : '' // 未知
      };
      if (this.filterCustomer.id) {
        params.customer_id = this.filterCustomer.id;
      }
      getProjectList(params).then(res => {
        if (res.data.list && res.data.list.length) {
          const resData = res.data.list;
          resData.forEach(item => {
            item.warranty_time2 = this.formatDate(item.warranty_time);
            // 发货时间
            item.send_time = item.send_time * 1000;
            let sendTime = item.send_time;
            // 调试时间
            item.debug_time = item.debug_time * 1000;
            let debugTime = item.debug_time;
            // 验收时间
            item.acceptance_time = item.acceptance_time * 1000;
            let acceptanceTime = item.acceptance_time;
            // 质保时间
            item.warranty_time = item.warranty_time * 1000;
            let warrantyTime = item.warranty_time;

            // 判断 质保时间、验收时间、调试时间、发货时间
            // 当前时间
            let currentDateTime = new Date().getTime();

            // 已过保
            if (warrantyTime < currentDateTime) {
              item.project_status = '已过保';
            } else {
              // 未过保
              // 有验收时间
              if (item.acceptance_time) {
                // 已验收
                // 超过验收时间
                if (acceptanceTime < currentDateTime) {
                  item.project_status = '已验收';
                } else {
                  // 未超过验收时间
                  // 有调试时间
                  if (item.debug_time) {
                    // 超过调试时间
                    if (debugTime < currentDateTime) {
                      item.project_status = '已交付';
                    } else {
                      // 未超过调试时间
                      // 有发货时间
                      if (item.send_time) {
                        // 超过发货时间
                        if (sendTime < currentDateTime) {
                          item.project_status = '试运行';
                        } else {
                          // 未超过发货时间
                          item.project_status = '未知';
                        }
                      } else {
                        // 无发货时间
                        item.project_status = '未知';
                      }
                    }
                  } else {
                    // 无调试时间
                    // 有发货时间
                    if (item.send_time) {
                      // 超过发货时间
                      if (sendTime < currentDateTime) {
                        item.project_status = '试运行';
                      } else {
                        // 未超过发货时间
                        item.project_status = '未知';
                      }
                    } else {
                      // 无发货时间
                      item.project_status = '未知';
                    }
                  }
                }
              } else {
                // 无验收时间
                // 有调试时间
                if (item.debug_time) {
                  // 超过调试时间
                  if (debugTime < currentDateTime) {
                    item.project_status = '已交付';
                  } else {
                    // 未超过调试时间
                    // 有发货时间
                    if (item.send_time) {
                      // 超过发货时间
                      if (sendTime < currentDateTime) {
                        item.project_status = '试运行';
                      } else {
                        // 未超过发货时间
                        item.project_status = '未知';
                      }
                    } else {
                      // 无发货时间
                      item.project_status = '未知';
                    }
                  }
                } else {
                  // 无调试时间
                  // 有发货时间
                  if (item.send_time) {
                    // 超过发货时间
                    if (sendTime < currentDateTime) {
                      item.project_status = '试运行';
                    } else {
                      // 未超过发货时间
                      item.project_status = '未知';
                    }
                  } else {
                    // 无发货时间
                    item.project_status = '未知';
                  }
                }
              }
            }
          });
          this.projectList = resData;
          this.noDataState = false;
        } else {
          this.projectList = [];
          this.noDataState = true;
        }

        // 从地图点击的项目跳转过来的，并且未请求到项目列表数据
        if (this.$route.query.from) {
          if (!this.projectList.length) {
            this.$toast('您未绑定该项目');
          }
        }
      });
    },

    // 格式化日期
    formatDate(now) {
      let dt = new Date(now * 1000);
      let year = dt.getFullYear();
      let month = dt.getMonth() + 1;
      month = month < 10 ? '0' + month : month;
      let date = dt.getDate();
      date = date < 10 ? '0' + date : date;
      return `${year}-${month}-${date}`;
    },

    // 筛选
    handleFilter() {
      this.showFilterCustomer = true;
    },

    // 删除搜索条件-客户
    deleteCustomer() {
      this.filterCustomer = {};
      this.getProjectListEvent();
    },

    // 点击tab栏
    clickTabItem(index) {
      this.currentTabIndex = index;
      this.getProjectListEvent();
    },

    // 跳转
    jumpView(id) {
      if (this.$checkBtnPermission('projectCenter:projectView:projectManage:list:detail')) {
        this.$router.push({ name: 'projectDetail', query: { id } });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.project-manage-container {
  width: 100%;
  height: 100%;

  .project-manage-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    // 搜索框区域
    .search-wrap {
      background-color: #ffffff;
      .search-input-box {
        height: 1.6rem;
        padding-right: 0.16rem;
        .van-search {
          height: 100%;
        }
        .filter-box {
          color: #666666;
        }
      }
      .custom-box {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.213333rem 0.426667rem;
        background-color: #fff;

        .custom-item {
          padding: 0.106667rem 0.213333rem;
          color: var(--color-deep-gray);
          font-size: 0.32rem;
          background-color: #f9f9f9;
          border-radius: 0.106667rem;

          span {
            margin-right: 0.266667rem;
          }

          .van-icon {
            color: #ccc;
          }
        }
      }
      .tab-switch-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.226667rem;
        padding: 0 0.4rem;
        color: #999999;
        font-size: 0.373333rem;
        li {
          height: 1.226667rem;
          line-height: 1.226667rem;
        }
        // 选中的样式
        .li-select {
          color: #333333;
          border-bottom: 0.08rem solid var(--color-primary);
        }
      }
    }

    // 项目列表区域
    .project-list-wrap {
      flex: 1;
      padding-top: 0.213333rem;
      font-size: 0.373333rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      .project-item-box {
        display: flex;
        align-items: center;
        height: 3.333333rem;
        background-color: #ffffff;
        margin-bottom: 0.213333rem;
        padding: 0.293333rem 0.4rem;
        .item-left-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100%;
          .icon-box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.12rem;
            height: 1.12rem;
            background-color: #f0fbfa;
            border-radius: 50%;
            margin-bottom: 0.293333rem;
            img {
              width: 0.48rem;
              height: 0.48rem;
            }
          }
          .status-box {
            width: 1.12rem;
            height: 0.48rem;
            line-height: 0.48rem;
            text-align: center;
            border-radius: 0.186667rem;
            background-color: #dbf2e4;
            color: #4bbc79;
            font-size: 0.32rem;
          }
          .delivery {
            background-color: #e5e5fd;
            color: #9795f5;
          }
          .acceptance {
            background-color: #d7ebf6;
            color: #5eaeda;
          }
          .bartender {
            background-color: #e6e6e6;
            color: #acacac;
          }
          .unknown {
            background-color: #fff7eb;
            color: #ffbd5b;
          }
        }
        .line-box {
          width: 1px;
          height: 2.693333rem;
          background-color: #f2f6fc;
          margin: 0 0.293333rem;
        }
        .item-right-box {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          padding: 0.08rem 0;
          .project-name {
            color: #333333;
            font-size: 0.4rem;
          }
          .middle-box {
            display: flex;
            justify-content: space-between;
            .middle-item {
              display: flex;
              flex-direction: column;
              .top-key {
                color: #666666;
                font-size: 0.32rem;
                margin-bottom: 0.266667rem;
              }
              .bottom-value {
                color: #666666;
                font-size: 0.346667rem;
              }
              .line-val {
                color: var(--color-primary);
              }
            }
          }
          .company-name {
            display: flex;
            align-items: center;
            img {
              width: 0.32rem;
              height: 0.32rem;
              margin-right: 0.16rem;
            }
            span {
              color: #999999;
              font-size: 0.32rem;
            }
          }
        }
      }
    }
  }
}
</style>